<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <table border="1" cellspacing="0" width="60%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>图像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职时间</th>
            <th>最后操作时间</th>
        </tr>
        <tr align="center" v-for="(emp , index) in emps">
            <td>{{index+1}}</td>
            <td>{{emp.name}}</td>
            <td>
                <img :src="emp.image" width="70px" height="50px">
            </td>
            <td>
                <span v-if="emp.gender == 1">男</span>
                <span v-if="emp.gender == 2">女</span>
            </td>
            <td>{{emp.job}}</td>
            <td>{{emp.entrydate}}</td>
            <td>{{emp.updatetime}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            emps:[]
        },
        mounted(){
            //发送异步请求获取数据
            axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result=>{
                this.emps = result.data.data;
            })
        }
    })
</script>
</html>